<template>
  <a-drawer :title="edit ? $t('app.setting.themecolor.cc') : $t('app.setting.themecolor.gg')" :width="470" :visible.sync="visible" @close="visible = false">
    <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }" layout="horizontal" class="drawer-form">
      <a-form-item :label="$t('app.setting.themecolor.hh')">
        <a-input v-decorator="['SourceChildName', { rules: [{ required: true, message: $t('user.verification-code.required111566110577240') }] }]"
          :placeholder="$t('app.setting.themecolor.volcano')" style="width: 270px; margin-left: 66px;"/>
      </a-form-item>
      <a-form-item :label="$t('app.setting.themecolor.hh.biemingC')">
        <a-input v-decorator="['SourceChildAliasName']"
          :placeholder="$t('app.setting.themecolor.volcano.biemingC')" style="width: 270px; margin-left: 66px;"/>
      </a-form-item>
      <a-form-item :label="$t('app.setting.themecolor.hh00')">
        <a-input v-decorator="['SourceChildNameEn', { rules: [{ required: true, message: $t('user.verification-code.required111566110577240') }] }]"
          :placeholder="$t('app.setting.themecolor.volcano11')" style="width: 270px; margin-left: 66px;"/>
      </a-form-item>
      <a-form-item :label="$t('app.setting.themecolor.hh.biemingE')">
        <a-input v-decorator="['SourceChildAliasNameEn']"
          :placeholder="$t('app.setting.themecolor.volcano.biemingE')" style="width: 270px; margin-left: 66px;"/>
      </a-form-item>
      <a-form-item :label="$t('app.setting.themecolor.iiiiii')">
        <a-select :placeholder="$t('app.setting.themecolor.iioo')" @change="level1Change" style="width: 270px; margin-left: 66px;" option-filter-prop="children"  :filter-option="filterOption"  show-search
          v-decorator="['SourceDataA', { rules: [{ required: true, message: $t('app.setting.themecolor.iioo3432323') }] }]">
          <a-select-option v-for="items in fatherLevel" :value="items.value" :key="items.value">{{
            lang ? items.label : items.labelEn ? items.labelEn : items.label
          }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item :label="$t('app.setting.themecolor.kk')">
        <a-select :placeholder="$t('app.setting.themecolor.kkoo')" @change="level2Change" style="width: 270px; margin-left: 66px;" option-filter-prop="children"  :filter-option="filterOption"  show-search
          v-decorator="['SourceDataB', { rules: [{ required: true, message: $t('app.setting.themecolor.kkoo34232') }] }]">
          <a-select-option v-for="items in father2Level" :value="items.value" :key="items.value">{{
            lang ? items.label : items.labelEn ? items.labelEn : items.label
          }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item :label="$t('app.setting.themecolor.mm')">
        <a-select :placeholder="$t('app.setting.themecolor.mmoo')" @change="level3Change" style="width: 270px; margin-left: 66px;" option-filter-prop="children"  :filter-option="filterOption"  show-search
          v-decorator="['SourceDataC', { rules: [{ required: true, message: $t('app.setting.themecolor.mmoo234235') }] }]">
          <a-select-option v-for="items in father3Level" :value="items.value" :key="items.value">{{
            lang ? items.label : items.labelEn ? items.labelEn : items.label
          }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item :label="$t('app.setting.themecolor.nn')">
        <a-select :placeholder="$t('app.setting.themecolor.nnoo')" style="width: 270px; margin-left: 66px;" option-filter-prop="children"  :filter-option="filterOption"  show-search
          v-decorator="['SourceDataD', { rules: [{ required: true, message: $t( 'app.setting.themecolor.nnoo3453') }] }]">
          <a-select-option v-for="items in father4Level" :value="items.value" :key="items.value">{{
            lang ? items.label : items.labelEn ? items.labelEn : items.label
          }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item :label="$t('app.setting.themecolor.oo')">
        <a-select :placeholder="$t('app.setting.themecolor.oooo')" style="width: 270px; margin-left: 66px;" option-filter-prop="children"  :filter-option="filterOption"  show-search
          v-decorator="['SourceDataLevel', { rules: [{ required: true, message: $t('app.setting.themecolor.oooo3453') }] }]">
          <a-select-option v-for="items in dataLevel" :value="items.value" :key="items.value">{{
            lang ? items.label : items.labelEn ? items.labelEn : items.label
          }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item :label="$t('app.setting.themecolor.pp')">
        <a-select :placeholder="$t('app.setting.themecolor.ppoo')" style="width: 270px; margin-left: 66px;" option-filter-prop="children"  :filter-option="filterOption"  show-search
          v-decorator="['SourceSensitivityLevel', { rules: [{ required: true, message: $t('user.verification-code.required111566110577246') }] }]">
          <a-select-option v-for="items in sensitivityLevel" :value="items.value" :key="items.value">{{
            lang ? items.label : items.labelEn ? items.labelEn : items.label
          }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item :label="$t('app.setting.themecolor.qq')">
        <a-select :placeholder="$t('app.setting.themecolor.qqoo')" style="width: 270px; margin-left: 66px;" option-filter-prop="children"  :filter-option="filterOption"  show-search
          v-decorator="['SourceProtectionLevel', { rules: [{ required: true, message: $t( 'app.setting.themecolor.qqoo3434') }] }]">
          <a-select-option v-for="items in protectionLevel" :value="items.value" :key="items.value">{{
            lang ? items.label : items.labelEn ? items.labelEn : items.label
          }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="ID" v-if="change" class="hidden">
        <a-input v-decorator="['Id']" />
      </a-form-item>
    </a-form>
    <div class="absolute right-0 bottom-0 w-full px-4 py-[10px] bg-white text-left z-1 flex justify-center">
      <a-row class="w-full" :gutter="24">
        <a-col :span="12">
          <a-button class="w-full border-none hover:bg-[#3F8CFF] hover:bg-opacity-5 shadow"
            @click="visible = false">{{ $t('app.setting.themecolor.rr') }}</a-button>
        </a-col>
        <a-col :span="12">
          <a-button :loading="loading" class="w-full border-none shadow" type="primary"
            @click.native.prevent="submitCreate()">
            <span v-if="!loading">{{ $t('app.setting.themecolor.ss') }}</span>
            <span v-else>{{ $t( 'app.setting.themecolor.tt') }}...</span>
          </a-button>
        </a-col>
      </a-row>
    </div>
  </a-drawer>
</template>
<script>
import { dropDownSelect, childdataCreate, childataItems, childdataChange } from '@/api/dcc'

export default {
  data() {
    return {
      loading: false,
      form: this.$form.createForm(this),
      content: '',
      visible: false,
      // 下拉数据
      dataLevel: [],
      sensitivityLevel: [],
      protectionLevel: [],
      fatherLevel: [],
      father2Level: [],
      father3Level: [],
      father4Level: [],
      eitem:'',
      eitem2:'',
      eitem3:'',
      eitem4:'',    
      change: false,
      ifEdit: false,
      lang: localStorage.getItem("lang").includes("zh-CN")
    };
  },
  created() {
    this.init()
  },
  mounted() {
    let that = this
    window.addEventListener("setItemEvent", function (e) {
      if (e.key === "lang") {
        let lang = JSON.parse(e.value);
        console.log(lang);
        if (lang === "zh-EN") {
          that.lang = false;
        } else {
          that.lang = true;
        }
      }
    });
  },
  methods: {
    async init() {
      try {
        // 数据等级
        const { data: dataLevel } = await dropDownSelect({ Types: 1 })

        // 敏感度等级
        const { data: sensitivityLevel } = await dropDownSelect({ Types: 2 })

        // 保护等级
        const { data: protectionLevel } = await dropDownSelect({ Types: 3 })

        // 初始数据分类
        const { data: fatherLevel } = await dropDownSelect({ Types: 4, Superior: 0 })

        this.dataLevel = dataLevel
        this.sensitivityLevel = sensitivityLevel
        this.protectionLevel = protectionLevel
        this.fatherLevel = fatherLevel

      } catch (error) {
        // 报错信息
        this.$message.error(error)
      } finally {
        // 不管成功失败都会执行
        this.listLoading = false
      }
    },
    async readInfo(record) {
      try {
        this.visible = true;
        this.edit = false
        this.change = true;
        const { data } = await childataItems({ id: record.Id })
        // console.log('data-----------',data);
        var sourceData = data[0]
        this.eitem=sourceData.SourceDataA
        this.eitem2=sourceData.SourceDataB
        this.eitem3=sourceData.SourceDataC
        this.eitem4=sourceData.SourceDataD
        // console.log('this.eitem',this.eitem);
        // console.log('this.eitem2',this.eitem2);
        // console.log('this.eitem3',this.eitem3);
        // console.log('this.eitem4',this.eitem4);
        sourceData.SourceChildName = record.Items
        this.form.setFieldsValue(sourceData)
        this.level1Change(sourceData.SourceDataA)
        this.level2Change(sourceData.SourceDataB)
        this.level3Change(sourceData.SourceDataC)
      } catch (error) {
        // 报错信息
        this.$message.error(error)
      }
    },
    async open() {
      this.form.resetFields()
      this.visible = true;
      this.change = false;
      this.edit = true
    },
    async level1Change(e) {
      try {
        // 获取二级数据分类
        const { data: father2Level } = await dropDownSelect({ Types: 4, Superior: e })
        this.father2Level = father2Level
        if(this.eitem!=e){
          this.form.setFieldsValue({
            SourceDataB:undefined,
          SourceDataC:undefined,
          SourceDataD:undefined
        })
        }
        
      } catch (error) {
        // 报错信息
        this.$message.error(error)
      } finally {
        // 不管成功失败都会执行
        this.listLoading = false
      }
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
    async level2Change(e) {
      try {
        // 获取三级数据分类
        const { data: father3Level } = await dropDownSelect({ Types: 4, Superior: e })
        this.father3Level = father3Level
        if(this.eitem2!=e){
          this.form.setFieldsValue({
          SourceDataC:undefined,
          SourceDataD:undefined
        })
        }
    
      } catch (error) {
        // 报错信息
        this.$message.error(error)
      } finally {
        // 不管成功失败都会执行
        this.listLoading = false
      }
    },
    async level3Change(e) {
      try {
        // 获取三级数据分类
        const { data: father4Level } = await dropDownSelect({ Types: 4, Superior: e })

        this.father4Level = father4Level
        
        console.log('father4Level',father4Level);
        if(this.eitem3!=e){
          this.form.setFieldsValue({
          SourceDataD:undefined
        })
        }
      } catch (error) {
        // 报错信息
        this.$message.error(error)
      } finally {
        // 不管成功失败都会执行
        this.listLoading = false
      }
    },
    async submitCreate() {
      const {
        form: { validateFields },
      } = this
      // 按钮loading
      this.loading = true
      validateFields({ force: true }, async (err, values) => {
        if (!err) {
          try {
            // console.log('我想看看values',values);
            values.SourceChildName = encodeURIComponent(values.SourceChildName)
            values.SourceChildNameEn = encodeURIComponent(values.SourceChildNameEn)
            values.SourceChildAliasName = encodeURIComponent(values.SourceChildAliasName)
            values.SourceChildAliasNameEn = encodeURIComponent(values.SourceChildAliasNameEn)
            const params = { ...values }
            if (this.change) {
              await childdataChange({ ...params })
            } else {
              await childdataCreate({ ...params })
            }
            this.$emit('succeed')
            this.$message.success(this.$t('user.verification-code.required111566171'))
            //如果成功就关闭
            this.visible = false;
          } catch (error) {
            this.$message.error(error)
          } finally {
            this.loading = false
          }
        } else {
          setTimeout(() => {
            this.loading = false
          }, 600)
        }
      })

    }
  },
};
</script>
<style lang="less" scoped>
/deep/.drawer-form {
  margin-bottom: 50px;

  // .ant-form-item {
  //   margin-right: 10px;
  // }

  // .ant-form-item-label {
  //   display: inline-block;
  //   line-height: 45px;
  //   width: 5px;
  //   margin-right: 20px;
  // }

  .checkbox {
    background: #EEE;
    padding: 10px;
    margin-top: 16px;
    position: relative;
    top: -10px;
    left: -10px;

    .ant-form-item-label {
      display: inline-block;
      line-height: 40px;
      width: 150px;
      // margin-right: 10px;
    }
  }
}
/deep/.ant-form-item-label {
    display: inline-block;
    overflow: visible!important;
    line-height: 39.9999px;
    white-space: nowrap;
    text-align: right;
    vertical-align: middle;
}
</style>